import { request } from "../../utils/request"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    hasResult: false, //开关
    keyword: "", //搜索关键字
    searchList: [], //搜索商品列表
    searchHistoryList: [], //历史搜索词列表
    filterIndex: 0, //搜索结果页的默认选中的筛选类型
    page: 1, //当前页
    pageSize: 8, //每页记录数
    totalPage: 0, //页数
    isLastPage: false, //是否是最后一页
    sort: null, //排序方式 gmt_create按时间 price按价格
    sorttype: null, //排序规则 asc升序 desc降序
    priceSort: "asc" //价格的排序方式
  },

  /**
   * 处理搜索框输入事件
   */
  handlerInput(e) {
    //获取输入的关键字
    const keyword = e.detail.value
    if (keyword) {
      //设置关键字
      this.setData({
        keyword
      })
      return
    }
    //清空搜索栏
    this.cleanKeyword()
  },

  /**
   * 搜索商品
   */
  async searchProduct(option) {
    //如果是点击过来的搜索请求
    const keyword = option.currentTarget.dataset.keyword
    if (keyword) {
      this.setData({
        keyword
      })
    } else if (!this.data.keyword) {
      //如果是直接点击搜索框搜索按钮，且没填写关键词，默认搜索鼠标
      this.setData({
        keyword: "鼠标"
      })
    }
    //组装请求参数
    let searchParam = {
      keyword: this.data.keyword,
      page: option.currentTarget.dataset.page || 1,
      pageSize: this.data.pageSize
    }
    //重置排序规则
    this.setData({
      sort: null,
      sorttype: null
    })
    //设置排序规则
    const sort = option.currentTarget.dataset.sort
    const sorttype = option.currentTarget.dataset.sorttype
    if (sort && sorttype) {
      searchParam.sort = sort
      searchParam.sortType = sorttype
      this.setData({
        sort,
        sorttype,
        priceSort: sort === "price" && sorttype === "asc" ? "desc" : "asc"
      })
    }
    //发送搜索请求
    const res = await request({ url: "/product/searchProduct/", method: "GET", data: searchParam })
    if (res.data.state === 0) {
      const { list, page, totalPage } = res.data.data
      //如果page大于1说明是追加数据的分页操作，否则就是覆盖数据操作
      const searchList = page > 1 ? this.data.searchList.concat(list) : list
      this.setData({
        searchList,
        hasResult: true,
        filterIndex: option.currentTarget.dataset.index || 0,
        page,
        totalPage,
        isLastPage: page === totalPage
      })
    }
    //处理历史搜索
    this.handlerSearchHistory()
  },

  /**
   * 处理历史搜索记录
   */
  handlerSearchHistory() {
    //本地缓存存放用户的搜索记录
    const searchHistoryList = wx.getStorageSync("searchHistory") || []
    //默认只存储用户最近10次搜索历史记录，如果已经达到上限，那么默认把最早的数据做出队操作
    if (searchHistoryList.length >= 10) {
      //从尾部删除元素
      searchHistoryList.pop()
    }
    const index = searchHistoryList.findIndex(v => v === this.data.keyword)
    if (index !== -1) {
      searchHistoryList.splice(index, 1)
    }
    //从头部添加元素
    searchHistoryList.unshift(this.data.keyword)
    wx.setStorageSync("searchHistory", searchHistoryList)
    this.setData({
      searchHistoryList
    })
  },

  /**
   * 清空历史搜索
   */
  cleanHistory() {
    wx.showModal({
      title: "温馨提示",
      content: "确定要从清空历史搜索吗？",
      success: res => {
        wx.removeStorageSync("searchHistory")
        this.setData({
          searchHistoryList: []
        })
      }
    })
  },

  /**
   * 清空搜索栏
   */
  cleanKeyword() {
    this.setData({
      keyword: "",
      hasResult: false,
      searchList: []
    })
  },

  /**
   * 分页查询商品
   */
  searchProductByPage() {
    //如果当前没有查询过数据或是当前数据已经是最后一页则不执行分页操作
    if (this.data.hasResult && this.data.page < this.data.totalPage) {
      //构建分页查询需要的一系列参数
      const option = {
        currentTarget: {
          dataset: {
            keyword: this.data.keyword,
            index: this.data.filterIndex,
            page: this.data.page + 1,
            sort: this.data.sort,
            sorttype: this.data.sorttype,
          }
        }
      }
      //执行查询操作
      this.searchProduct(option)
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const searchHistoryList = wx.getStorageSync("searchHistory") || []
    this.setData({
      searchHistoryList
    })
  },

  /**
   * 页面相关事件处理函数--监听用户上拉动作
   */
  onReachBottom() {
    //分页查询商品
    this.searchProductByPage()
  }
})